<script setup lang="ts">
import { useToggleItemId } from "@/components/framework/toggle-view-helper.ts";
import { useSettingsContext } from "@/components/settings/context.ts";
import { onMounted, onUnmounted, shallowRef } from "vue";
import type { FormInstance } from "ant-design-vue";
import type { SettingsSectionContext } from "@/components/settings/types.ts";

const { setDefaultValue, saveValue } = defineProps<{
  model: any;
  setDefaultValue: () => void;
  saveValue: () => void;
}>();

const itemId = useToggleItemId();
const settingsCtx = useSettingsContext();

const formRef = shallowRef<FormInstance>();
const context: SettingsSectionContext = {
  validate() {
    return formRef.value
      ?.validate()
      .then(() => true)
      .catch(() => false);
  },
  save() {
    saveValue();
  },
};

settingsCtx.registerSection(itemId, context);

onMounted(() => {
  setDefaultValue();
});

onUnmounted(() => {
  settingsCtx.unregisterSection(itemId);
});
</script>

<template>
  <a-form ref="formRef" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }" :model="model">
    <slot />
  </a-form>
</template>

<style scoped lang="less"></style>
